<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>

<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="<%=basePath %>/css/updateVideo.css"/>
    <link rel="stylesheet" href="<%=basePath %>/css/list.css">
    <link href="<%=basePath %>/css/H-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="<%=basePath %>/css/formsCSS.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath %>/css/simditor.css"/>

    <!-- select start -->
    <link href="<%=basePath %>/lib/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="<%=basePath %>/css/multiple-select.css" rel="stylesheet" type="text/css"/>
    <!-- select end -->

    <script src="<%=basePath%>/lib/My97DatePicker/WdatePicker.js"></script>
    <script src="<%=basePath %>/js/jquery.min.js"></script>
    <script src="<%=basePath %>/js/formsJS.js"></script>
    <script src="<%=basePath %>/js/jquery.form.js"></script>
    <script type="text/javascript" src="<%=basePath %>/js/module.js"></script>
    <script type="text/javascript" src="<%=basePath %>/js/hotkeys.js"></script>
    <script type="text/javascript" src="<%=basePath %>/js/uploader.js"></script>
    <script type="text/javascript" src="<%=basePath %>/js/simditor.js"></script>
    <script type="text/javascript" src="<%=basePath %>js/H-ui.js"></script>
    <script type="text/javascript" src="<%=basePath %>js/laydate/laydate.js"></script>
    <script src="<%=basePath%>/js/multiple-select.js"></script>

    <script type="text/javascript">


        //选中下拉框选择的值
        function choice() {
            //清空选项
            /* $("#courseIds").multipleSelect("uncheckAll");
            $("#chapterIds").multipleSelect("uncheckAll");
            $("#cardIds").multipleSelect("uncheckAll"); */
            var type = document.getElementById('type').value;
            if (type == 1) {
                $("#divcourseId").show();
                $("#divchapterId").hide();
                $("#divcardId").hide();
            } else if (type == 2) {
                $("#divcourseId").hide();
                $("#divchapterId").show();
                $("#divcardId").hide();
            } else if (type == 3) {
                $("#divcourseId").hide();
                $("#divchapterId").hide();
                $("#divcardId").show();
            } else {
                $("#divcourseId").hide();
                $("#divchapterId").hide();
                $("#divcardId").hide();
            }
        };

        function choice1() {
            //清空选项
            /* $("#courseIds").multipleSelect("uncheckAll");
            $("#chapterIds").multipleSelect("uncheckAll");
            $("#cardIds").multipleSelect("uncheckAll"); */
            var type1 = document.getElementById('type1').value;
            if (type1 == 1) {
                $("#divcourseId1").show();
                $("#divchapterId1").hide();
                $("#divcardId1").hide();
            } else if (type1 == 2) {
                $("#divcourseId1").hide();
                $("#divchapterId1").show();
                $("#divcardId1").hide();
            } else if (type1 == 3) {
                $("#divcourseId1").hide();
                $("#divchapterId1").hide();
                $("#divcardId1").show();
            } else {
                $("#divcourseId1").hide();
                $("#divchapterId1").hide();
                $("#divcardId1").hide();
            }

        };
    </script>
</head>
<body>
<div class="connect_wrap">
    <h3 style="text-align: center;">课程赠送信息维护</h3>
    <div class="row cl" style="max-width:88%;margin-left:8%;">
        <div class="labelText"></div>
        <form id="configForm" method="post"
              enctype="multipart/form-data" action="<%=basePath %>course/gift/saveOrUpdate">
            <div class="col-sm-4"></div>
            <div class="col-sm-4">
                <div class="boxs">
                <input type="hidden" name="id" value="${giftInfo.id}">
                    <div style="width:90%;margin-top:30px;">
                        <div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">课程类别
                        </div>
                    <select id="type" name="type" class="selectBox" onchange="choice()"
                            required="required">
                        <!--  	<option value="">分类</option>  -->
                        <option value="1" ${giftInfo.type == 1 ? 'selected="selected"' : '' }>课程
                        </option>
                        <option value="2" ${giftInfo.type == 2 ? 'selected="selected"' : '' }>章节
                        </option>
                        <option value="3" ${giftInfo.type == 3 ? 'selected="selected"' : '' }>课程包
                        </option>
                        <%-- <option value="4" ${goodsOrderRelation.goodsSort == 4 ? 'selected="selected"' : '' }>商品</option>  --%>
                    </select>
                    </div>
                    <div style="width:90%;margin-top:30px" id="divcourseId">
                        　
                        <div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">选择课程
                        </div>

                        <select id="courseIds" name="courseIds" class="selectBox">
                            <c:forEach items="${courses}" var="c">
                                <option value="${c.id}" ${giftInfo.type == 1 and c.id == giftInfo.courseId ? 'selected="selected"' : ''}>${c.id}:${c.courseName}</option>
                            </c:forEach>
                        </select>

                    </div>

                    <div style="width:90%;margin-top:30px;display:none;" id="divchapterId">

                        <div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">选择章节
                        </div>

                        <select id="chapterIds" name="chapterIds" class="selectBox">
                            <c:forEach items="${chapters}" var="c">
                                <option value="${c.id}" ${giftInfo.type == 2 and c.id == giftInfo.courseId ? 'selected="selected"' : ''}>${c.id}:${c.chapterName}</option>
                            </c:forEach>
                        </select>
                    </div>

                    <div style="width:90%;margin-top:30px;display:none;" id="divcardId">
                        <div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">选择课程包
                        </div>

                        <select id="cardIds" name="cardIds" class="selectBox">
                            <c:forEach items="${cards}" var="c">
                                <option value="${c.id}" ${giftInfo.type == 3 and c.id == giftInfo.courseId ? 'selected="selected"' : ''}>${c.id}:${c.cardName}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <!-- 分割线 -->
                    <div style="width:90%;margin-top:30px;">
                        <div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">赠送课程类别
                        </div>
                    <select id="type1" name="giftType" class="selectBox" onchange="choice1()"
                            required="required">
                        <!--  	<option value="">分类</option>  -->
                        <option value="1" ${giftInfo.giftType == 1 ? 'selected="selected"' : '' }>课程
                        </option>
                        <option value="2" ${giftInfo.giftType == 2 ? 'selected="selected"' : '' }>章节
                        </option>
                        <option value="3" ${giftInfo.giftType == 3 ? 'selected="selected"' : '' }>课程包
                        </option>
                        <%-- <option value="4" ${goodsOrderRelation.goodsSort == 4 ? 'selected="selected"' : '' }>商品</option>  --%>
                    </select>
                    </div>
                    <div style="width:90%;margin-top:30px" id="divcourseId1">
                        　
                        <div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">选择赠送课程
                        </div>

                        <select id="courseIds1" name="giftCourseIds" class="selectBox">
                            <c:forEach items="${courses}" var="c">
                                <option value="${c.id}" ${giftInfo.giftType == 1 and c.id == giftInfo.giftCourseId ? 'selected="selected"' : ''}>${c.id}:${c.courseName}</option>
                            </c:forEach>
                        </select>

                    </div>

                    <div style="width:90%;margin-top:30px;display:none;" id="divchapterId1">

                        <div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">选择赠送章节
                        </div>

                        <select id="chapterIds1" name="giftChapterIds" class="selectBox">
                            <c:forEach items="${chapters}" var="c">
                                <option value="${c.id}" ${giftInfo.giftType == 2 and c.id == giftInfo.giftCourseId ? 'selected="selected"' : ''}>${c.id}:${c.chapterName}</option>
                            </c:forEach>
                        </select>
                    </div>

                    <div style="width:90%;margin-top:30px;display:none;" id="divcardId1">
                        <div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">选择赠送课程包
                        </div>

                        <select id="cardIds1" name="giftCardIds" class="selectBox">
                            <c:forEach items="${cards}" var="c">
                                <option value="${c.id}" ${giftInfo.giftType == 3 and c.id == giftInfo.giftCourseId ? 'selected="selected"' : ''}>${c.id}:${c.cardName}</option>
                            </c:forEach>
                        </select>
                    </div>

                    <div style="width:90%;margin-top:30px;">
                        <div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">有效日期
                        </div>
                        <input name="time" type="text" class="inputBox" id="date" readonly="readonly"
                               value="<c:if test="${not empty giftInfo.startDate}">${giftInfo.startDate} - ${giftInfo.endDate}</c:if>">
                    </div>

                    <div style="width:90%;margin-top:30px;">
                        <div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">开启状态
                        </div>

                        <select name="status" class="selectBox">
                                <option value="1" ${giftInfo.status == 1 ? 'selected="selected"' : ''}>开启</option>
                                <option value="0" ${giftInfo.status == 0 ? 'selected="selected"' : ''}>关闭</option>
                        </select>
                    </div>
                    <input type="submit" value="确定" class="true"/>
                    <input type="button" class="false" value="取消" onclick="window.history.go(-1)">
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script type="text/javascript">

    $(function () {
        laydate.render({
            elem: '#date'
            ,range: true
        });
    });

    $(function () {
        var type = document.getElementById('type').value.trim();
        if (type == 1) {
            $("#divcourseId").show();
            $("#divchapterId").hide();
            $("#divcardId").hide();
        } else if (type == 2) {
            $("#divcourseId").hide();
            $("#divchapterId").show();
            $("#divcardId").hide();
        } else if (type == 3) {
            $("#divcourseId").hide();
            $("#divchapterId").hide();
            $("#divcardId").show();
        } else {
            $("#divcourseId").show();
            $("#divchapterId").hide();
            $("#divcardId").hide();
        }

        var type1 = document.getElementById('type1').value.trim();
        if (type1 == 1) {
            $("#divcourseId1").show();
            $("#divchapterId1").hide();
            $("#divcardId1").hide();
        } else if (type1 == 2) {
            $("#divcourseId1").hide();
            $("#divchapterId1").show();
            $("#divcardId1").hide();
        } else if (type1 == 3) {
            $("#divcourseId1").hide();
            $("#divchapterId1").hide();
            $("#divcardId1").show();
        } else {
            $("#divcourseId1").show();
            $("#divchapterId1").hide();
            $("#divcardId1").hide();
        }
    });

    // $(function () {
    //     $('#courseIds').multipleSelect({
    //         placeholder: "请选择",
    //         filter: true
    //     });
    // })
    // $(function () {
    //     $('#chapterIds').multipleSelect({
    //         placeholder: "请选择",
    //         filter: true
    //     });
    // })
    // $(function () {
    //     $('#cardIds').multipleSelect({
    //         placeholder: "请选择",
    //         filter: true
    //     });
    // })

    // $(function () {
    //     $('#courseIds1').multipleSelect({
    //         placeholder: "请选择",
    //         filter: true
    //     });
    // })
    // $(function () {
    //     $('#chapterIds1').multipleSelect({
    //         placeholder: "请选择",
    //         filter: true
    //     });
    // })
    // $(function () {
    //     $('#cardIds1').multipleSelect({
    //         placeholder: "请选择",
    //         filter: true
    //     });
    // })
</script>

</html>